<template>
<loading v-if="loading"></loading>
<div class="pd clearfix" style="font-size:0" v-else>
  <ul class="menu">
    <li v-for="(item, index) in menulist" :key="item.id">
      <div class="menu-box clearfix">
        <span class="m-tit">
        <el-checkbox :disabled='isdisabled' :checked="mdefault.includes(item.id)" @change="menuselected($event,item.id)">
          {{item.title}}
        </el-checkbox>
        </span>
        <div class="row-role">
          <div class="page" v-if="item.permission.page.length!==0">
            <span class="tit">页面级：</span>
            <el-checkbox :checked="item.default.includes(page.id)" :disabled='isdisabled || !mdefault.includes(item.id)' @change="selected($event,page.id)" :key="page.id" v-for="page in item.permission.page">{{page.name}}</el-checkbox>
          </div>
          <div class="row" v-if="item.permission.row.length!==0">
            <span class="tit">行级：</span>
            <el-checkbox :checked="item.default.includes(row.id)" :disabled='isdisabled || !mdefault.includes(item.id)'  @change="selected($event,row.id)" :key="row.id" v-for="row in item.permission.row">{{row.name}}</el-checkbox>
          </div>
        </div>
      </div>
      <ul v-if="item.child!==''">
        <li class="clearfix"  v-for="(child, cindex) in item.child" :key="child.id">
          <span class="m-tit">
            <el-checkbox :checked="mdefault.includes(child.id)" :disabled='isdisabled || !mdefault.includes(item.id)' @change="menuselected($event,child.id)">
              {{child.title}}
            </el-checkbox>
          </span>
          <div class="row-role">
            <div class="page" v-if="child.permission.page.length!==0">
              <span class="tit">页面级：</span>
              <el-checkbox :label="page.name" :key="page.id" :disabled='isdisabled || !mdefault.includes(child.id)' @change="selected($event,page.id)" :checked="child.default.includes(page.id)" v-for="page in child.permission.page"></el-checkbox>
            </div>
            <div class="row" v-if="child.permission.row.length!==0">
              <span class="tit">行级：</span>
              <el-checkbox :label="row.name" :key="row.id" :disabled='isdisabled || !mdefault.includes(child.id)' @change="selected($event,row.id)" :checked="child.default.includes(row.id)" v-for="row in child.permission.row"></el-checkbox>
            </div>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>
</template>
<script>
// import icon from '../utils/icon.js'
import config from '../../utils/config'
import crypt from '../../utils/crypto-helper-pkcs7'
import axios from 'axios'
import Vue from 'vue'
import loading from '../../components/loading'
export default {
  data () {
    return {
      menulist: [],
      rid: '',
      role: '',
      isdisabled: false,
      mdefault: [],
      loading: true
    }
  },
  components: {
    loading
  },
  created () {
    this.rid = this.$route.params.rid
    var role = this.$route.query.role
    var rolest = role.replace(/ /g, '+')
    this.role = crypt.decrypt(rolest)
    if (this.role === 'Administrator') {
      this.isdisabled = true
    }
    this.menu()
  },
  methods: {
    menu () {
      var param = {
        id: this.rid
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.rolecheck + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.menulist = response.data.list
          this.mdefault = response.data.menu
          this.menulist.forEach((item) => {
            var count = item.default.length
            Vue.set(item, 'count', count)
            if (item.child !== '') {
              item.child.forEach((child) => {
                var count = child.default.length
                Vue.set(child, 'count', count)
              })
            }
          })
          this.loading = false
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    selected (event, id) {
      var param = {
        role_id: this.rid,
        permission_id: id
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      var type = ''
      if (event.target.checked) {
        type = 'add'
      } else {
        type = 'delete'
      }
      axios.get(config.domain + config.urls.rolep + type + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.menu()
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    menuselected (event, id) {
      var param = {
        role_id: this.rid,
        menu_id: id
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      var type = ''
      if (event.target.checked) {
        type = 'add'
      } else {
        type = 'delete'
      }
      axios.get(config.domain + config.urls.rolem + type + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.menu()
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
}
</script>
<style>
.menu {
  background: #f1f7f8;
  padding: 10px;
  border-top: 2px solid #3f8cb6;
  border-radius: 4px;
}
.menu span.m-tit {
  height: 32px;
  line-height: 32px;
  font-size: 15px;
  position: absolute;
  display: inline-block
}
.menu .row-role {
  font-size: 16px;
  color: #000;
  display: inline-block;
  margin-left: 250px;
}
.menu ul {
  margin-left: 25px;
  color: #666;
}
.menu ul li,.menu .menu-box {
  border: 1px solid #d0d0d0;
  margin: 4px 0;
  padding: 0 6px;
  position: relative;
  min-height: 32px;
}
.menu span.url{
  margin-left: 40px;
  color: #3c8dbc;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
}
.icon-title {
  display: inline-block;
  color: #3c8dbc;
  font-size: 16px;
  margin-right: 4px;
}
.page .el-checkbox-group, .row .el-checkbox-group{
  display: inline-block;
}
.row-role .page .el-checkbox, .row-role .row .el-checkbox, .row-role .page span.tit, .row-role .row span.tit{
  color: #3c8dbc;
}
.row-role .el-checkbox__input.is-disabled+.el-checkbox__label {
  color: rgba(60, 141, 188, 0.8);
}
.page span.tit, .row span.tit {
  display: inline-block;
  width: 70px;
  text-align: right;
  font-size: 15px;
}
</style>

